<template>
    <div>
        <city-header></city-header>
        <city-search :cities="this.cities"></city-search>
        <city-list :cities="this.cities" :hotCities="this.hotCities" :letter="letter"></city-list>
        <city-alphabet class="list" :cities="cities" @change="handleChange"></city-alphabet>
    </div>
</template>

<style lang="stylus" scoped>
  .list{
      position:absolute;
      right:.5rem;
  }
</style>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import axios from "axios"

export default {
    name:"City",
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data(){
        return {
            cities:{},
            hotCities:[],
            letter:""
        }
    },
    methods:{
        getCityInfo(){
            axios.get("./api/city.json").then(this.getSucc)
        },
        getSucc(res){
            let data = res.data.data;
            this.cities = data.cities;
            this.hotCities = data.hotCities
            
            
        },
        handleChange(letter){
            this.letter = letter
        }
    },
    mounted (){
        this.getCityInfo()
    }
}
</script>


